<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 90509
  Date: 2020/9/1
  Time: 18:13
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>课程表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/pintuer.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>

<body>
<!--表单查询-->
<%--<div class="panel panel-primary" style="border: 1px solid dodgerblue;">
    <div class="panel-heading" style="background-color: dodgerblue;">课表查询</div>
    <br>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label" align="right">班级姓名:</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" placeholder="请输入要查询的姓名" />
            </div>

            <label class="col-sm-2 control-label" align="right">编号:</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" placeholder="请输入要查询的编号" />
            </div>
            <div class="col-sm-4">
                <button class="btn btn-success btn-sm">查询</button>
                <button type="button" class="btn btn-success btn-sm" onclick="addWin()">新增</button>
            </div>
        </div>
    </form>
</div>--%>
<!--表格-->
<div class="panel panel-primary" style="border: 1px solid dodgerblue;">
    <div class="panel-heading" style="background-color: dodgerblue;font-size: 16px;color: #FFFFFF">
        课程列表
        &nbsp;&nbsp;&nbsp;&nbsp;选择班级：
        <select style="-webkit-text-fill-color: slategrey;width: 160px;height: 36px;display: inline-block" id="classID" class="form-control">
        </select>
        <button id="go" onclick="gogo()" class="btn btn-success btn-sm">点击查询</button>
    </div>

    <table class="table table-bordered table-hover">
        <thead>
        <th width="0%"></th>
        <th width="10%">班级名称</th>
        <th>课程名称</th>
        <th>授课老师</th>
        <th>授课教室</th>
        <th>授课时间</th>
        <th width="15%">操作</th>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>

</div>
<div style="position: absolute;left: 40%;">
    每页
    <select style="height: 30px;width: 60px; border: 1px solid green;" id="myrow" onchange="loadList()">
        <option value="5">5</option>
        <option value="10">10</option>
    </select>
    条

    <button class="btn btn-success btn-sm" onclick="per()">上一页</button>
    <button class="btn btn-success btn-sm" onclick="next()">下一页</button>
    <button class="btn btn-success btn-sm" onclick="indexPage()">首页</button>
    <button class="btn btn-success btn-sm" onclick="endPages()">尾页</button>
    共<span id="total">xx</span>页
    一共<span id="pages">xx</span>条
    当前<span id="curPage">xx</span>页
</div>
<!--模态框-->
<div class="modal fade" id="myWin" style="top:70px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: dodgerblue;height: 40px;padding-top: 1px;">
                <h4 align="center" id="title">增加课程</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <input type="hidden" id="skId">
                        <div class="col-sm-10">
                            <label class="col-sm-2 control-label" align="right">班级:</label>
                            <input type="text" id="firstClass" class="form-control">
                        </div>

                        <div class="col-sm-10">
                            <label class="col-sm-2 control-label" align="right">课程:</label>
                            <select id="courcechange" class="form-control">
                                <option id="firstCource"></option>
                                <optgroup id="secendCource" label="可选课程"></optgroup>
                            </select>
                        </div>

                        <div class="col-sm-10">
                            <label class="col-sm-2 control-label" align="right">老师:</label>
                            <select id="teacherchange" class="form-control">
                                <option id="firstTeacher"></option>
                                <optgroup id="secendTeacher" label="可选老师"></optgroup>
                            </select>
                        </div>

                        <div class="col-sm-10">
                            <label class="col-sm-2 control-label" align="right">教室:</label>
                            <select id="roomchange" class="form-control">
                                <option id="firstRoom"></option>
                                <optgroup id="secendRoom" label="可选老师"></optgroup>
                            </select>
                        </div>

                        <div class="col-sm-10">
                            <label class="col-sm-2 control-label" align="right">时间:</label>
                            <input type="date" id="firstTime" class="form-control">
                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" type="button" id="updateBtn"onclick="update()">修改</button>
                <button class="btn btn-success" type="button" id="addBtn" onclick="insert()">新增</button>
                <button class="btn btn-success" type="button" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    //文档加载事件
    $(function(){
        claList();
    })
    //页码
    var page=1;
    //尾页码
    var endPage;
    //上一页
    function per() {
        page--;
        if(page<1){
            page=1
        }
        loadList();
    }
    //下一页
    function next() {
        page++;
        if(page>endPage){
            page=endPage;
        }
        loadList();
    }
    //首页
    function indexPage() {
        page=1
        loadList();
    }
    //尾页
    function endPages() {
        page=endPage;
        loadList();
    }
    function gogo() {
        loadList();
    }
    //加载列表
    function loadList(){
        //获取用户选择的每页显示条数
        var row = $("#myrow").val();
        var classID = $("#classID").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/teach/select",
            data:{"page":page,"row":row,"classID":classID},
            type:"get",
            dataType:"json",
            success:function(data){
                //获取查询的结果集
                var list = data.data;
                //尾页
                endPage=data.endPage;
                //显示总条数
                $("#pages").text(data.total);
                //显示总页数
                $("#total").text(data.pages);
                //显示当前页
                $("#curPage").text(data.curPage);
                //拼接html的变量
                var html="";
                for(var i=0;i<list.length;i++){
                    html+="<tr>" +
                        "<td>"+list[i].skId+"</td>" +
                        "<td>"+list[i].clName+"</td>" +
                        "<td>"+list[i].cName+"</td>" +
                        "<td>"+list[i].uName+"</td>" +
                        "<td>"+list[i].rName+"</td>" +
                        "<td>"+list[i].time+"</td>" +
                        "<td><button class='btn btn-warning btn-sm' onclick='upWindow(this)'>修改</button>" +
                        "<button class='btn btn-danger btn-sm' onclick='del(this)'>删除</button></td>" +
                        "</tr>"
                }
                //html设置文本和标签
                $("#tb").html(html);

            }
        })
    }
    function claList(){
        $.ajax({
            url:"${pageContext.request.contextPath}/teach/selectClass",
            type:"get",
            dataType:"json",
            success:function(data){
                var claList = data.data;
                var html="";
                for (var i = 0;i<claList.length;i++){
                    html+="<option style='color: #1b6d85' value="+claList[i].clId+">"+claList[i].clName+"</option>"
                }
                $("#classID").html(html);
            }
        })
        loadList();
    }
    //打开新增窗口
    function addWin(){
        //清空模态框的数据
        clearWin();
        //显示模态框
        $("#myWin").modal("show");
        //更改窗体的标题
        $("#title").text("员工新增");
        //隐藏修改按钮的button
        $("#updateBtn").hide();
        //显示新增按钮的button
        $("#addBtn").show();
    }

    //新增数据
    function insert() {
        //获取员工姓名
        var empName = $("#userName").val();
        var empAge = $("#age").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/emp/add",
            data:{"empName":empName,"empAge":empAge},
            type:"get",
            dataType:"json",
            success:function(data){
                if(data.info=="新增成功"){
                    $("#myWin").modal("hide")
                    //刷新
                    loadList();
                }else{
                    alert(data.info);
                }
            }
        })
    }

    //清空
    function clearWin(){
        $("#myId").val("");
        $("#userName").val("");
        $("#age").val("");
    }
    function xjj() {
        courList();
    }
    //打开修改窗口
    function upWindow(obj){
        //显示模态框
        $("#myWin").modal("show");
        //更改窗体的标题
        $("#title").text("课表修改");
        //隐藏新增按钮的button
        $("#addBtn").hide();
        //显示修改按钮的button
        $("#updateBtn").show();


        //获取选中行的skId
        var skId = $(obj).parent().parent().find("td").eq(0).text();
        //设置模态框中 的值
        $("#skId").val(skId);

        //获取选中行的的第一列的数据
        var className = $(obj).parent().parent().find("td").eq(1).text();
        //设置模态框中 的值
        $("#firstClass").val(className);


        //获取选中行的的第二列的数据
        var courceName = $(obj).parent().parent().find("td").eq(2).text();
        //设置模态框中 的值
        $("#firstCource").text(courceName);
        courList();

        //获取选中行的的第三列的数据
        var teacher = $(obj).parent().parent().find("td").eq(3).text();
        //设置模态框中 的值
        $("#firstTeacher").text(teacher);
        teacherList();

        //获取选中行的的第四列的数据
        var room = $(obj).parent().parent().find("td").eq(4).text();
        //设置模态框中 的值
        $("#firstRoom").text(room);
        roomList();

        //获取选中行的的第五列的数据
        var date = $(obj).parent().parent().find("td").eq(5).text();
        //设置模态框中 的值
        $("#firstTime").val(date);
    }

    //修改数据
    function update() {
        var skId = $("#skId").val();
        //获取id
        var clName = $("#firstClass").val();
        //获取员工姓名
        var cId = $("#courcechange").val();
        //获取年龄
        var uId = $("#teacherchange").val();
        var skRoom = $("#roomchange").val();
        var skTime = $("#firstTime").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/teach/update",
            data:{"clName":clName,"skId":skId,"cId":cId,"uId":uId,"skRoom":skRoom,"skTime":skTime},
            type:"get",
            dataType:"json",
            success:function(data){
                if(data.info=="修改成功"){
                    $("#myWin").modal("hide")
                    //刷新
                    loadList();
                }else{
                    alert(data.info);
                }
            }
        })
    }

    //删除
    function del(obj) {
        var info = confirm("你确定要删除吗")
        if(info){
            //获取要删除的id
            var skId = $(obj).parent().parent().find("td").eq(0).text();
            $.ajax({
                url:"${pageContext.request.contextPath}/teach/del",
                data:{"skId":skId},
                type:"get",
                dataType:"json",
                success:function(data){
                    if(data.info=="删除成功"){
                        $("#myWin").modal("hide")
                        //刷新
                        loadList();
                    }else{
                        alert(data.info);
                    }
                }
            })
        }
    }
    function courList(){
        var clName = $("#firstClass").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/teach/courListByName",
            type:"get",
            data:{"clName":clName},
            dataType:"json",
            success:function(data){
                var courList = data.data;
                var html="";
                for (var i = 0;i<courList.length;i++){
                    html+="<option style='color: #1b6d85' value="+courList[i].cId+">"+courList[i].cName+"</option>"
                }
                $("#secendCource").html(html);
            }
        })
    }
    function teacherList(){
        $.ajax({
            url:"${pageContext.request.contextPath}/teach/teacherList",
            type:"get",
            dataType:"json",
            success:function(data){
                var userList = data.data;
                var html="";
                for (var i = 0;i<userList.length;i++){
                    html+="<option style='color: #1b6d85' value="+userList[i].uId+">"+userList[i].name+"</option>"
                }
                $("#secendTeacher").html(html);
            }
        })
    }
    function roomList(){
        $.ajax({
            url:"${pageContext.request.contextPath}/teach/roomList",
            type:"get",
            dataType:"json",
            success:function(data){
                var userList = data.data;
                var html="";
                for (var i = 0;i<userList.length;i++){
                    html+="<option style='color: #1b6d85' value="+userList[i].rId+">"+userList[i].rName+"</option>"
                }
                $("#secendRoom").html(html);
            }
        })
    }
</script>